<template>
	<view class="content">
		<view class="center-box">
			<view class="center-panel">

				<!-- 选择性别 -->
				<view class="form-item">
					<view class="gender-select">
						<view class="gender-item" @click="genderChange('男')">
							<image src="../../static/boy-a.png" mode=""
								:class="{'gender-selected':formData.gender == '男'}"></image>
							<view :class="{'gender-selected-t':formData.gender == '男'}">
								男
							</view>
						</view>
						<view class="gender-item" @click="genderChange('女')">
							<image src="../../static/girl-a.png" mode=""
								:class="{'gender-selected':formData.gender == '女'}"></image>
							<view :class="{'gender-selected-t':formData.gender == '女'}">
								女
							</view>
						</view>
						<view class="gender-item" @click="genderChange('未知')">
							<image src="../../static/unknow.png" mode=""
								:class="{'gender-selected':formData.gender == '未知'}"
								style="box-sizing: border-box;padding: 4px;">
							</image>
							<view :class="{'gender-selected-t':formData.gender == '未知'}">
								未知
							</view>
						</view>
					</view>

				</view>



				<!-- 选择是否已经出生 -->
				<view class="form-item">
					<view class="form-item-label">
						是否出生：
					</view>
					<view class="form-item-content">
						<radio-group name="" @change="radioChange">
							<label>
								<radio value="已出生" color="red" checked /><text>已出生</text>
							</label>
							<label>
								<radio value="未出生" color="red" /><text>未出生</text>
							</label>
						</radio-group>
					</view>
				</view>

				<!-- 输入姓氏 -->
				<view class="form-item">
					<view class="form-item-label">
						姓氏：
					</view>
					<view class="form-item-content">
						<input type="text" class="input" v-model.trim="formData.firstName">
					</view>
				</view>


				<!-- 出生时间 -->
				<view class="form-item">
					<view class="form-item-label">
						出生时间：
					</view>
					<view class="form-item-content">
						<view class="input" @click="openTimePicker"> {{ formData.date }}</view>
					</view>
				</view>


				<!-- 出生地点 -->
				<view class="form-item">
					<view class="form-item-label">
						出生地点：
					</view>
					<view class="form-item-content">
						<view class="input" @click="open"> {{ formData.area }}</view>
					</view>
				</view>


				<!-- 期望品质 -->
				<view class="form-item">
					<view class="form-item-label">
						期望品质：
					</view>
					<view class="form-item-content">
						<view class="input" @click="openCharacter"> {{ formData.character }}</view>
					</view>
				</view>

				<!-- 固定字 -->
				<view class="form-item">
					<view class="form-item-label">
						定字：
					</view>
					<view class="form-item-content">
						<input type="text" class="input" v-model.trim="formData.fixedword">
						<text class="word-pos" :class="{'active':formData.fixedpos === '首'}"
							@click="formData.fixedpos = '首'">首</text>
						<text class="word-pos" :class="{'active':formData.fixedpos === '尾'}"
							@click="formData.fixedpos = '尾'">尾</text>
					</view>
				</view>

			</view>

			<button class="submit" @click="submitForm"> 获取吉名 </button>
		</view>
		<uv-datetime-picker ref="datetimePicker" mode="datetime" v-model="datetime" @confirm="dateTimeConfirm">
		</uv-datetime-picker>


		<uv-picker ref="areaPicker" :columns="addressList" keyName="name" @change="areaChange"
			@confirm="areaConfirm"></uv-picker>


		<uv-popup ref="popup">
			<view class="popup-panel">

				<view class="popup-top">
					<view class="popup-close" @click="selectCharacterCancel">
						取消
					</view>
					<view class="popup-title">
						品质标签 <text>（可选 {{3 -selectCharacterList.length }}/3）</text>
					</view>
					<view class="popup-ok" @click="selectCharacterOk">
						确定
					</view>
				</view>

				<view class="character-tags">
					<view class="character-tag" v-for="(c,i) in characters" @click="selectCharacter(c,i)">
						<view class="tag-inner" :class="{'tag-active': selectCharacterList.includes(c)}">
							{{c}}
						</view>
					</view>
				</view>

			</view>
		</uv-popup>

		<!-- 模态框 -->
		<uv-modal ref="modal" title="提示" content="观看广告,获取吉名字" @confirm="confirmAd"></uv-modal>

		<RewardVideoAd @over="adOver" ref="rewardVideoRef"></RewardVideoAd>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		timeFormat,
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import RewardVideoAd from '@/components/RewardVideoAd/RewardVideoAd.vue'


	/*------------表单数据--------------*/
	const formData = ref({
		gender: "男",
		firstName: "",
		date: "",
		area: "",
		isBorn: "已出生",
		character: "",
		fixedword: "",
		fixedpos: "首"
	})
	/*------------选择性别--------------*/
	const
		genderChange = (val) => {
			formData.value.gender = val
		}

	/*------------是否出生--------------*/
	const radioChange = (evt) => {
		console.log(evt)
		formData.value.isBorn = evt.detail.value

	}

	/*------------出生日期--------------*/
	const datetimePicker = ref()
	const datetime = ref(Number(new Date()))

	function dateTimeConfirm(e) {
		formData.value.date = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
	}
	const openTimePicker = () => {
		datetimePicker.value?.open()
	}


	/*------------出生地点--------------*/
	import useArea from '@/hooks/useArea.js'
	const [areaPicker, addressList, areaChange, areaConfirm, open] = useArea((area) => {
		formData.value.area = area;
	})

	/*------------期望品质--------------*/
	import charactersArr from './characters.js'
	const popup = ref()
	const characters = ref(charactersArr)
	const selectCharacterList = ref([])
	const openCharacter = () => {
		popup.value?.open('bottom')
	}
	const selectCharacterCancel = () => {

		selectCharacterList.value = []

		popup.value?.close()
	}
	const selectCharacterOk = () => {
		formData.value.character = selectCharacterList.value.join(",")
		popup.value?.close()

	}
	const selectCharacter = (char, i) => {
		if (selectCharacterList.value.includes(char)) {
			selectCharacterList.value = selectCharacterList.value.filter(c => c != char)
		} else {
			if (selectCharacterList.value.length >= 3) {
				return
			} else {
				selectCharacterList.value.push(char)
			}
		}
	}


	import {
		useSecurity
	} from '@/hooks/security.js'
	// watch监听用户输入
	watch(() => formData.value.firstName,

		async (word) => {
			if (!word.trim()) {
				return
			}

			let r = await useSecurity([{
				content: word
			}])


			if (r) {
				formData.value.firstName = "*".repeat(word.length)

				toast("姓氏不符合要求")
			}

		}
	)



	const nameFlag = ref(false)
	watch(() => formData.value.firstName,

		async (word) => {
			if (!word.trim()) {
				return
			}

			let r = await useSecurity([{
				content: word
			}])

			nameFlag.value = r;


			if (r) {
				formData.value.firstName = "*".repeat(word.length)

				toast("姓氏不符合要求")
			}

		}
	)

	const fixedFlag = ref(false)
	watch(() => formData.value.fixedword,

		async (word) => {
			if (!word.trim()) {
				return
			}

			let r = await useSecurity([{
				content: word
			}])
			fixedFlag.value = r;


			if (r) {
				formData.value.firstName = "*".repeat(word.length)

				toast("固定字不符合要求")
			}

		}
	)




	const modal = ref()

	const rewardVideoRef = ref()

	/*------------提交表单--------------*/
	import {
		isChinese,
		containKeywords
	} from '@/utils/index.js'
	const submitForm = () => {

		// uni.navigateTo({
		// url:
		`/pages/generate/generate?gender=${formData.value.gender}&isBorn=${formData.value.isBorn}&firstName=${formData.value.firstName}&date=${formData.value.date}&area=${formData.value.area}&character=${formData.value.character}&fixedword=${formData.value.fixedword}&fixedpos=${formData.value.fixedpos}`
		// })

		// 验证姓氏
		if (nameFlag.value || !formData.value.firstName || formData.value.firstName.length > 2 ||
			!isChinese(formData
				.value
				.firstName) ||
			containKeywords(formData.value.firstName)) {
			toast("姓氏不符合要求")
		} else {

			// 验证出生时间
			if (!formData.value.date) {
				toast("请选择出生时间")
			} else {
				// 验证出生地点
				if (!formData.value.area) {
					toast("请选择出生地点")
				} else {

					if (fixedFlag.value || formData.value.fixedword && (!isChinese(formData.value.fixedword)) ||
						formData
						.value.fixedword
						.length > 2 || containKeywords(formData.value.fixedword)) {
						toast("固定字不符合要求")
					} else {

						console.log("表单验证通过！")


						// 弹框，提示用户，观看激励视频广告

						modal.value.open();
					}
				}
			}
		}
	}

	// 广告播放完毕，跳转到生成页
	const adOver = () => {
		uni.navigateTo({
			url: `/pages/generate/generate?gender=${formData.value.gender}&isBorn=${formData.value.isBorn}&firstName=${formData.value.firstName}&date=${formData.value.date}&area=${formData.value.area}&character=${formData.value.character}&fixedword=${formData.value.fixedword}&fixedpos=${formData.value.fixedpos}`
		})
	}

	// 点击确定，弹出广告
	const confirmAd = () => {

		console.log("确定弹框。。。", rewardVideoRef)
		rewardVideoRef.value.show()
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.center-box {
		width: 90vw;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.submit {
			width: 90vw;
			height: 100rpx;
			line-height: 100rpx;
			background-color: red;
			color: #fff;
			font-size: 40rpx;
			border: 24rpx;
			margin-top: 32rpx;
		}


		.center-panel {
			box-sizing: border-box;
			padding: 20px;
			border-radius: 12px;
			font-size: 40px;
			color: #333;
			font-weight: bold;

			.form-item {
				display: flex;
				margin-top: 12px;

				.form-item-label {
					width: 160rpx;
					font-size: 32rpx;
					height: 40px;
					line-height: 40px;

				}

				.form-item-content {
					flex: 1;
					font-size: 40rpx;
					position: relative;

					.word-pos {
						display: inline-block;
						text-align: center;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						background-color: #bbb;
						padding: 6px;
						border-radius: 20px;
						font-size: 32rpx;
						color: #fff;
						position: absolute;
						z-index: 10;
						top: 50%;
						right: 6px;
						transform: translateY(-50%);

						&:nth-of-type(1) {
							right: 90rpx;
						}

						&.active {
							background-color: red;
						}
					}




				}


				.gender-select {
					display: flex;
					width: 100%;
					font-size: 40rpx;
					text-align: center;

					.gender-item {
						flex: 1;

						image {
							width: 120rpx;
							height: 120rpx;
							box-sizing: border-box;
							border-radius: 120rpx;
						}

						.gender-selected {
							border: solid 4rpx red;
						}

						.gender-selected-t {
							color: red;
							font-weight: bold;
						}
					}
				}
			}
		}
	}


	radio-group {
		label {
			margin-left: 30rpx;

			radio {
				// border: solid 1px #f00;
				// border-radius: 40px;
			}
		}
	}


	.input {
		min-height: 80rpx;
		line-height: 80rpx;
		background-color: #eee;
		padding: 3px 12px;
		border-radius: 4px;
		font-size: 40rpx;
	}




	.popup-panel {
		min-height: 200px;
		width: 100%;
		background-color: #fff;

		.popup-top {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			display: flex;
			color: #333;
			border-bottom: solid 2rpx #ddd;
			margin-bottom: 10rpx;

			.popup-close {
				width: 80px;
				color: #666;
			}

			.popup-ok {
				width: 80px;
				color: red;
			}

			.popup-title {
				flex: 1
			}

		}

		.character-tags {
			display: flex;
			flex-wrap: wrap;

			.character-tag {
				width: 25vw;
				box-sizing: border-box;
				padding: 16rpx;

				.tag-inner {
					background-color: #eee;
					border-radius: 4px;
					font-size: 28rpx;
					text-align: center;
					box-sizing: border-box;
					padding: 16rpx 0;
					color: #333;
				}

				.tag-active {
					background-color: red;
					color: #fff;
				}
			}

		}
	}
</style>